<template>
  <div class="loginbody">
    <div class="login">
      <h1>iHRM后台管理系统</h1>
      <el-form
        ref="loginref"
        :model="loginform"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item prop="mobile">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginform.mobile"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-unlock"
            v-model="loginform.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginbtn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      loginform: {
        mobile: "13800000002",
        password: "123456",
      },
      rules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern:/^1[3456789]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 16, message: "密码格式不正确", trigger: "blur" },
        ],
      },
    };
  },
  methods:{
    ...mapActions("my_user",['loginAsync']),
    loginbtn(){
          this.$refs['loginref'].validate(async isok=>{
              if(isok){
                  await this.loginAsync(this.loginform)
                  this.$router.push('/dashBoard')
              }else{
                  console.log(error);
                  return false
              }
          })
      }
  }
};
</script>

<style scoped>
.loginbody {
  height: 100%;
  background: rgb(72, 120, 255);
  position: relative;
}
.login {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 30px 40px;
  text-align: center;
  box-sizing: border-box;
}
.login h1 {
  margin-left: 70px;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 200;
  font-size: 40px;
}
.el-button {
  padding: 13px 200px;
  font-size: 20px;
}
</style>
